<template>
  <div v-loading="loading" class="body">
    <el-card shadow="never" style="margin-bottom: 20px; border: none;">
      <div class="header">
        <el-descriptions title="试卷信息" border>
          <el-descriptions-item label="试卷名">{{ paperDetail.title }}</el-descriptions-item>
          <el-descriptions-item label="试卷总分">{{ paperDetail.points }}</el-descriptions-item>
          <el-descriptions-item label="及格分">{{ paperDetail.pass }}</el-descriptions-item>
          <el-descriptions-item label="及格分百分比">{{ paperDetail.pass_percentage }}%</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <div class="title">
      试卷题目信息
    </div>
    <el-card shadow="never" style="border: none;">
      <div class="header-table">
        <el-button
          type="danger"
          icon="el-icon-delete"
          :disabled="currentItem.length <= 0"
          @click="batchDelete"
        >批量删除</el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        <el-table-column
          align="center"
          type="expand"
        >
          <template v-slot="{ row }">
            <div class="inner-table">
              <el-table
                :data="row.content"
                border
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  prop="content"
                  label="内容"
                  align="center"
                />
                <el-table-column
                  prop="is_ok"
                  label="是否为答案"
                  align="center"
                >
                  <template v-slot="{ row: crow }">
                    <el-tag effect="dark" :type="crow.is_ok === 1 ? 'success' : 'danger'">
                      {{ crow.is_ok === 1 ? '正确答案' : '错误答案' }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in option"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          align="center"
        >
          <template v-if="item.prop === 'type'" v-slot="{ row }">
            <el-tag type="success">
              {{ row.type.name }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="action"
          label="操作"
          align="center"
        >
          <template v-slot="{ row }">
            <el-popconfirm
              title="是否将改道题从试卷中删除？"
              @confirm="deleteSubject(row.id)"
            >
              <el-button slot="reference" type="danger">删除</el-button>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
      <div>
        <Pagination
          style="margin-top: 0;padding-bottom: 0;"
          :total="page.total"
          :limit="page.paginate"
          @pagination="pagination"
        />
      </div>

    </el-card>

  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { detailsPaper, removeSubjectFromPaper, batchRemoveSubjectFromPaper } from '@/api/examination'
export default {
  components: { Pagination },
  data() {
    return {
      paperDetail: {},
      loading: false,
      paperId: null,
      currentItem: [],
      tableData: [],
      allSubjectList: [],
      page: {
        page: 1,
        total: 0,
        paginate: 10
      }
    }
  },
  computed: {
    option() {
      return [
        {
          prop: 'type',
          label: '题目类型'
        },
        {
          prop: 'topic',
          label: '题目内容'
        },
        {
          prop: 'score',
          label: '分数'
        }
      ]
    }
  },
  created() {
    this.paperId = this.$route.params.id
    console.log('this.$route ------>', this.$route)
    this.getdata(this.paperId)
  },
  methods: {
    pagination(e) {
      this.page.page = e.page
      this.page.paginate = e.limit
      this.getTableData()
    },

    async getdata(id) {
      this.loading = true
      try {
        const res = await detailsPaper(id)
        this.paperDetail = res.data
        this.page.total = res.data.topic.length
        this.allSubjectList = res.data.topic
        this.getTableData()
      } catch (error) {
        this.$message.error('获取试卷详情失败')
      } finally {
        this.loading = false
      }
    },

    getTableData() {
      this.tableData = this.allSubjectList.slice(
        (this.page.page - 1) * this.page.paginate,
        this.page.page * this.page.paginate
      )
    },

    tableRowClassName({ row }) {
      if (row.is_ok === 1) return 'success-row'
      // else return 'error-row'
    },

    deleteSubject(id) {
      const params = {
        paper_id: this.paperId,
        topic_id: id
      }
      this.removeSubjectFromPaperApi(params)
    },

    async removeSubjectFromPaperApi(params) {
      try {
        const res = await removeSubjectFromPaper(params)
        if (res.status === 'success') {
          this.$message.success('删除成功')
          this.getdata(this.paperId)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },

    batchDelete() {
      this.$confirm('确定从试卷中删除吗？', '提示', { type: 'warning' }).then(() => {
        const params = {
          paper_id: this.paperId,
          topic_id: JSON.stringify(this.currentItem)
        }
        this.batchRemoveSubjectFromPaperApi(params)
      })
    },
    async batchRemoveSubjectFromPaperApi(params) {
      try {
        const res = await batchRemoveSubjectFromPaper(params)
        if (res.status === 'success') {
          this.$message.success('删除成功')
          this.getdata(this.paperId)
        }
      } catch (error) {
        this.$message.error(error.message)
      }
    },

    handleSelectionChange(e) {
      this.currentItem = e.map(item => item.id)
    }
  }
}
</script>
<style lang="scss">
.body {
  //background-color: #fff;
  padding: 20px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  .header {
    margin-bottom: 20px;
  }
  .inner-table {
    padding: 0 20px;
  }
  .title {
    padding: 20px;
    text-align: center;
    font-weight: bold;
  }
  .header-table {
    margin: 0 0 20px 0;
  }
}
.success-row {
  background: #f0f9eb !important;
}
.error-row {
  background: #ffeded !important;
}
</style>
